<template>
  <div class="container">
    <transition name="fade-page"
                mode="out-in">
      <template v-if="loginPage">
        <Login @switch='switch_page'></Login>
      </template>
      <template v-else>
        <Register @switch='switch_page'></Register>
      </template>
    </transition>
  </div>
</template>

<script>
import Login from './components/Login'
import Register from './components/Register'
export default {
  name: 'login-register',
  data () {
    return {
      show: false,
      loginPage: true
    }
  },
  components: {
    Login,
    Register
  },
  methods: {
    switch_page (val) {
      this.loginPage = val
    }
  }
}
</script>

<style lang="stylus" scoped>
.container
  height 100vh
  background-image linear-gradient(to right bottom, #abecd6, #fbed96)
  display flex
  align-items center
  justify-content center
.fade-page-enter-active, .fade-page-leave-active
  transition all 0.5s ease
.fade-page-enter, .fade-page-leave-to
  transform translateX(-500px)
  opacity 0
</style>
